<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--<meta http-equiv="Refresh" content="3; url=">-->
    <meta name="description" content="LayoutIt">
    <title>综合管理平台</title>

    <!-- 核心样式开始 -->
    <link href="css/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/77-fonts.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/css/jquery-ui.min.css">
    <link rel="stylesheet" href="./css/css/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="./css/css/jquery.datetimepicker.css">

    <link rel="stylesheet" type="text/css" href="./css/base.css"/>
    <link title="blue" href="css/blue.css" rel="stylesheet">
    <link title="purpleBlue" href="css/purpleBlue.css" rel="stylesheet" disabled="disabled">
    <link title="golden" href="css/golden.css" rel="stylesheet" disabled="disabled">
    <!--核心样式结束-->

    <link rel="stylesheet" type="text/css" href="./css/index-2.css"/>


    <!-- Fav and touch fa fas -->
    <link rel="shortcut icon" href="image/favicon.ico">

    <!--核心js文件开始-->
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="js/js/html5shiv.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/js/jquery-2.1.4.min.js"></script>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/js/jquery-1.12.0.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/js/less.min.js"></script>
    <script type="text/javascript" src="js/js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/js/jquery.ui.touch-punch.min.js"></script>
    <script src="./js/js/jquery.cookie.js"></script>
    <script src="./js/js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="./js/js/jquery.datetimepicker.js"></script>
    <script src="./js/common.js"></script>
    <!--核心js文件结束-->
    <script src="js/js/gauge.js"></script>

    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/nav.js"></script>
    <script src="js/js/echarts.min.js"></script>

</head>

<body style="cursor: auto; overflow: hidden;" class="edit">
<!--<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand brand" href="#"><img src="image/favicon.ico"> 综合管理平台</a>
    </div>
    <div>
        <ul class="nav navbar-nav fr">
            &lt;!&ndash; 用户登录信息开始 &ndash;&gt;
            <li class="dropdown user">
                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-user"></i>
                    <span class="username">Admin</span>
                    <i class="fa fa-angle-down"></i>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="extra_profile.html"><i class="fa fa-user"></i> 我的资料</a></li>
                    <li><a href="page_calendar.html"><i class="fa fa-calendar"></i> 我的日历</a></li>
                    <li class="divider"></li>
                    <li><a href="extra_lock.html"><i class="fa fa-lock"></i> 锁定屏幕</a></li>
                    <li><a href="login.html"><i class="fa fa-key"></i> 注销</a></li>
                </ul>

            </li>
            &lt;!&ndash; 用户登录信息结束 &ndash;&gt;
        </ul>
    </div>
    &lt;!&ndash;功能条&ndash;&gt;
    <div class="toolbars cb">
        <div class="template">
            <div class="refresh" title="刷新">
                <i class="fa fa-refresh"></i>
            </div>
            <div class="t-size" title="缩大/小">
                <i class="fa fa-th-large"></i>
            </div>
            <div id="clear" class="t-clear" title="清空视域">
                <i class="fa fa-trash"></i>
            </div>
        </div>
        <div class="compare" title="比较">
            <img src="./image/compare.png" alt="">
        </div>
        <div class="viewHead">
            <div class="crowd">吞吐量(流入和流出)</div>
            <div class="begin">
                <input type="text" name="begin" class="dtpicker">
            </div>
            <div class="line">—</div>
            <div class="end">
                <input type="text" name="end" class="dtpicker">
            </div>
            <div class="lastHour">最近一小时</div>
            <div class="submit">
                <i class="fa fa-check-square-o"></i>
                <input type="hidden" name="allbegin">
                <input type="hidden" name="allend">
            </div>
        </div>
    </div>
</nav>-->
<div class="container-fluid">
    <div class="row-fluid">
        <!-- 菜单栏开始 BEGIN SIDEBAR MENU -->
        <div class="">
            <div class="sidebar-nav">

                <!-- 侧边按钮开始 BEGIN SIDEBAR TOGGLER BUTTON -->
                <div class="clearfix">
                    <div class="sidebar-toggler hidden-phone zoom-out" id="devpreview1"><i
                            class="fa fa-angle-left fa-2x"></i></div>
                </div>
                <!-- 侧边按钮结束 BEGIN SIDEBAR TOGGLER BUTTON -->

                <!-- 响应快速搜索表单开始 BEGIN RESPONSIVE QUICK SEARCH FORM -->
                <form class="sidebar-search">
                    <div class="input-box">
                        <a href="javascript:;" class="remove"></a>
                        <input type="text" placeholder="Search..."/>
                        <div class="submit"><i class="fa fa-search"></i></div>
                    </div>
                </form>
                <!-- 响应快速搜索表单结束 END RESPONSIVE QUICK SEARCH FORM -->

                <ul class="nav nav-list accordion-group bg-color">
                    <li class="nav-header">
                        <a href="index.html"><i class="i-732"></i><span class="title">首页</span></a>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <a href="servers.html"><i class="fa-server fa"></i><span class="title">服务器</span></a>
                    </li>
                    <li style="display: none" class="rows" id="estRows">
                        <div class="lyrow large" index="0">
                            <a href="#close" class="remove label label-important"><i
                                    class="fa fa-remove fa fa-white"></i></a>
                            <span class="drag label">深圳</span>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span12 column">
                                        <div class="viewHead">
                                            <div class="crowd">吞吐量(流入和流出)</div>
                                            <div class="begin">
                                                <input type="text" name="begin" class="dtpicker">
                                            </div>
                                            <div class="end">
                                                <input type="text" name="end" class="dtpicker">
                                            </div>
                                            <div class="lastHour">最近一小时</div>
                                            <div class="submit">
                                                <i class="fa fa-check"></i>
                                                <input type="hidden" name="">
                                                <input type="hidden" name="">
                                            </div>
                                        </div>
                                        <iframe class='model-data' src=""></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lyrow large" index="1">
                            <a href="#close" class="remove label label-important"><i
                                    class="fa fa-remove fa fa-white"></i></a>
                            <span class="drag label">广州</span>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span12 column">
                                        <div class="viewHead">
                                            <div class="crowd">吞吐量(流入和流出)</div>
                                            <div class="begin">
                                                <input type="text" name="begin" class="dtpicker">
                                            </div>
                                            <div class="end">
                                                <input type="text" name="end" class="dtpicker">
                                            </div>
                                            <div class="lastHour">最近一小时</div>
                                            <div class="submit">
                                                <i class="fa fa-check"></i>
                                                <input type="hidden" name="">
                                                <input type="hidden" name="">
                                            </div>
                                        </div>
                                        <iframe class='model-data' src=""></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lyrow large ui-draggable" index='2'>
                            <a href="#close" class="remove label label-important"><i
                                    class="fa fa-remove fa fa-white"></i></a>
                            <span class="drag label">香港</span>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span12 column">
                                        <div class="viewHead">
                                            <div class="crowd">吞吐量(流入和流出)</div>
                                            <div class="begin">
                                                <input type="text" name="begin" class="dtpicker">
                                            </div>
                                            <div class="end">
                                                <input type="text" name="end" class="dtpicker">
                                            </div>
                                            <div class="lastHour">最近一小时</div>
                                            <div class="submit">
                                                <i class="fa fa-check"></i>
                                                <input type="hidden" name="">
                                                <input type="hidden" name="">
                                            </div>
                                        </div>
                                        <iframe class='model-data' src=""></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lyrow large ui-draggable" index="3">
                            <a href="#close" class="remove label label-important"><i
                                    class="fa fa-remove fa fa-white"></i></a>
                            <span class="drag label">澳门</span>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span12 column">
                                        <div class="viewHead">
                                            <div class="crowd">吞吐量(流入和流出)</div>
                                            <div class="begin">
                                                <input type="text" name="begin" class="dtpicker">
                                            </div>
                                            <div class="end">
                                                <input type="text" name="end" class="dtpicker">
                                            </div>
                                            <div class="lastHour">最近一小时</div>
                                            <div class="submit">
                                                <i class="fa fa-check"></i>
                                                <input type="hidden" name="">
                                                <input type="hidden" name="">
                                            </div>
                                        </div>
                                        <iframe class='model-data' src=""></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <a href="topology.html"><i class="i-750"></i><span class="title">业务拓扑</span></a>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <a href="report.html"><i class="i-712"></i><span class="title">服务质量报告</span></a>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <a href="users.html"><i class="i-759"></i><span class="title">用户设置</span></a>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <i class="i-761 i-spin"></i>
                        <span class="title">应用扩展</span>
                    </li>
                    <li style="display: none;" class="rows mute" id="elmComm">
                        <div class="preview">建设中...</div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 菜单栏结束 END SIDEBAR MENU -->
        <!-- 视图区域开始 -->
        <div id="content-md">
            <div class="viewArea">
                <div class="viewArea-h">健康状态</div>
                <div class="viewArea-c">
                    <div class="v-top clearfix">
                        <ul>
                            <li>
                                <div id="dashboard1"></div>
                            </li>
                            <li>
                                <div id="dashboard2"></div>
                            </li>
                            <li>
                                <div id="dashboard3"></div>
                            </li>
                            <li>
                                <div id="dashboard4"></div>
                            </li>
                            <li>
                                <div id="dashboard5"></div>
                            </li>
                            <li>
                                <div id="dashboard6"></div>
                            </li>
                            <li>
                                <div id="dashboard7"></div>
                            </li>
                            <li>
                                <div id="dashboard8"></div>
                            </li>
                        </ul>
                    </div>
                    <div class="v-bottom clearfix">
                        <ul>
                            <li>
                                <div class="equipment">
                                    <div class="e-t">
                                        <span class="title pull-left"><i class="fa-server fa"></i>广州健康报告</span>
                                        <a href="index_server_details.html" class="more pull-right">更多 <i
                                                class="fa fa-caret-right"></i></a>
                                    </div>
                                    <div class="e-c">
                                        <ul>
                                            <li><a href="index_detail.html" class="red"><a href="index_detail.html"
                                                                                           class="red">服务器响应时间</a></a>
                                            </li>
                                            <li class="yellow">慢页面率</li>
                                            <li>HTTP错误</li>
                                            <li>重传</li>
                                            <li>重传延时</li>
                                            <li>应用错误数</li>
                                            <li>请求失败数</li>
                                            <li>总净荷</li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="equipment">
                                    <div class="e-t">
                                        <span class="title pull-left"><i class="fa-server fa"></i>深圳健康报告</span>
                                        <a href="index_server_details-2.html" class="more pull-right">更多 <i
                                                class="fa fa-caret-right"></i></a>
                                    </div>
                                    <div class="e-c">
                                        <ul>
                                            <li class="red"><a href="index_detail.html" class="red">服务器响应时间</a></li>
                                            <li class="yellow">慢页面率</li>
                                            <li>HTTP错误</li>
                                            <li>重传</li>
                                            <li>重传延时</li>
                                            <li>应用错误数</li>
                                            <li>请求失败数</li>
                                            <li>总净荷</li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="equipment">
                                    <div class="e-t">
                                        <span class="title pull-left"><i class="fa-server fa"></i>香港健康报告</span>
                                        <span class="more pull-right">更多 <i class="fa fa-caret-right"></i></span>
                                    </div>
                                    <div class="e-c">
                                        <ul>
                                            <li class="red"><a href="index_detail.html" class="red">服务器响应时间</a></li>
                                            <li class="yellow">慢页面率</li>
                                            <li>HTTP错误</li>
                                            <li>重传</li>
                                            <li>重传延时</li>
                                            <li>应用错误数</li>
                                            <li>请求失败数</li>
                                            <li>总净荷</li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="equipment">
                                    <div class="e-t">
                                        <span class="title pull-left"><i class="fa-server fa"></i>澳门健康报告</span>
                                        <span class="more pull-right">更多 <i class="fa fa-caret-right"></i></span>
                                    </div>
                                    <div class="e-c">
                                        <ul>
                                            <li class="red"><a href="index_detail.html" class="red">服务器响应时间</a></li>
                                            <li class="yellow">慢页面率</li>
                                            <li>HTTP错误</li>
                                            <li>重传</li>
                                            <li>重传延时</li>
                                            <li>应用错误数</li>
                                            <li>请求失败数</li>
                                            <li>总净荷</li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 视图区域结束 -->
    </div>
</div>
<script type="text/javascript">
    $(function () {

    })

    var myChart1 = echarts.init(document.getElementById('dashboard1'));
    var myChart2 = echarts.init(document.getElementById('dashboard2'));
    var myChart3 = echarts.init(document.getElementById('dashboard3'));
    var myChart4 = echarts.init(document.getElementById('dashboard4'));
    var myChart5 = echarts.init(document.getElementById('dashboard5'));
    var myChart6 = echarts.init(document.getElementById('dashboard6'));
    var myChart7 = echarts.init(document.getElementById('dashboard7'));
    var myChart8 = echarts.init(document.getElementById('dashboard8'));

    // 指定图表的配置项和数据
    option1 = {
        title: {
            text: '服务器响应时间'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['广州','深圳','香港','澳门']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['10:00', '10:01', '10:02', '10:03', '10:04', '10:05', '10:06']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '广州',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '深圳',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '香港',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '澳门',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
        ]
    };
    option2 = {
        title: {
            text: '慢页面率'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['广州','深圳','香港','澳门']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['10:00', '10:01', '10:02', '10:03', '10:04', '10:05', '10:06']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '广州',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '深圳',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '香港',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '澳门',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
        ]
    };
    option3 = {
        title: {
            text: 'HTTP错误'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['广州','深圳','香港','澳门']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['10:00', '10:01', '10:02', '10:03', '10:04', '10:05', '10:06']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '广州',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '深圳',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '香港',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '澳门',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
        ]
    };
    option4 = {
        title: {
            text: '重传'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['广州','深圳','香港','澳门']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['10:00', '10:01', '10:02', '10:03', '10:04', '10:05', '10:06']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '广州',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '深圳',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '香港',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '澳门',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);
    myChart2.setOption(option2);
    myChart3.setOption(option3);
    myChart4.setOption(option4);
    myChart5.setOption(option1);
    myChart6.setOption(option2);
    myChart7.setOption(option3);
    myChart8.setOption(option4);
    window.onresize = function () {
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
        myChart4.resize();
        myChart5.resize();
        myChart6.resize();
        myChart7.resize();
        myChart8.resize();
    }
    //    var url = window.location.href;
    //console.log(url.indexOf("https"));
    //    if (url.indexOf("https") < 0) {
    //        url = url.replace("http:", "https:");
    //        window.location.replace(url);
    //    }
</script>
<!--<div class="footer" style="text-align:center;">-->
<!--<p>From:<a href="http://182.92.168.13/" target="_blank">77Element</a></p>-->
<!--</div>-->


</body>
</html>